<template>
	<div class="my-approval-container">
		<!-- 顶部筛选 -->
		<div class="apply-top">
			<van-dropdown-menu active-color="#1768EF" class="dropdown-menu">
				<van-dropdown-item v-model="handleState" :options="handleStateList" :title="title"
					@change="handleStateListChange" />
				<van-dropdown-item v-model="approvalState" :options="approvalStateList" :title="title1"
					@change="approvalChange" />
				<van-dropdown-item v-model="businessType" :options="businessTypeList" :title="title2"
					@change="businessTypeChange" />
			</van-dropdown-menu>

			<!-- 日期选择 -->
			<van-field v-model="value3" readonly clickable label="提交时间" placeholder="请选择日期"
				@click="showDatePicker = true" />
		</div>

		<!-- 列表内容 -->
		<div class="case-list">
			<template v-if="list.length">
				<div v-for="(item, index) in list" :key="index" class="apply-item" @click="goDetailTap($event, item)">
					<div class="apply-title">
						<div class="left">
							<span class="type-name">{{ getTypeName(item.businessType) }}</span>
							<van-tag :type="getStatusType(item.status)" class="status-tag">
								{{ getStatusText(item.status) }}
							</van-tag>
						</div>
						<span class="date">{{ item.startTime }}</span>
					</div>

					<div class="apply-content">
						<div class="info-row">
							<span class="mr-20">发起人：{{ item.startUser }}</span>
							<span>部门：{{ item.startUserDept }}</span>
						</div>
					</div>
				</div>
			</template>

			<!-- 加载状态 -->
			<van-empty v-if="total === 0" description="暂无数据" />
			<div v-else class="bottom-tip">
				<van-loading v-if="isLoading" size="24px">加载中...</van-loading>
				<span v-else-if="total > 10 && list.length === total">到底了~</span>
			</div>
		</div>

		<!-- 回到顶部 -->
		<van-back-top v-show="!showTop" right="20" bottom="20" />

		<!-- 日期选择器 -->
		<van-calendar v-model="showDatePicker" @confirm="onDateConfirm" @cancel="onDateCancel" />
	</div>
</template>
<script>
	import NavBar from '@/components/NavBar'
	import {
		getUserById,doUploadBatchFile,modifyPhoto
	} from "@/api/mineInfo.js"
	import {
		Toast
	} from 'vant'

	export default {
		name: 'MyApproval',
		data() {
			return {
				showDatePicker: false,
				pageNum: 1,
				isLoading: true,
				list: [],
				total: null,
				hasNextPage: true,
				showTop: true,

				// 筛选相关
				handleState: '1',
				approvalState: '',
				businessType: '',
				value3: '',
				title: '待处理',
				title1: '审核状态',
				title2: '',

				// 下拉选项
				handleStateList: [{
						text: '待处理',
						value: '1'
					},
					{
						text: '已处理',
						value: '2'
					}
				],
				approvalStateList: [{
						text: '全部',
						value: ''
					},
					{
						text: '待审批',
						value: '1'
					},
					{
						text: '已通过',
						value: '2'
					},
					{
						text: '已驳回',
						value: '3'
					}
				],
				businessTypeList: [{
						text: '全部',
						value: ''
					},
					{
						text: '食堂采购',
						value: 't_purchase_apply'
					},
					{
					    text: '物品进货',
					    value: 't_office_supplies_apply_record_purchase'
					},
					{
					    text: '物品领用',
					    value: 't_office_supplies_apply_record'
					},
					{
					    text: '用车申请',
					    value: 't_vehicle_apply'
					},
					{
					    text: '延时用车申请',
					    value: 't_vehicle_excep_apply'
					},
					{
					    text: '车辆维保',
					    value: 't_vehicle_maintenance'
					},
					{
					    text: '司机请假',
					    value: 't_vehicle_attendance_leave'
					},
					{
					    text: '通知公告',
					    value: 't_notice_apply'
					}
				],
				user :[]
			}
		},

		computed: {
			NavBar,
			// 计算属性处理类型名称和状态显示
			getTypeName() {
				return (type) => {
					const typeMap = {
						't_purchase_apply': '食堂采购',
						't_office_supplies_apply_record_purchase': '物品进货',
						// ... 其他类型
					}
					return typeMap[type] || ''
				}
			},

			getStatusType() {
				return (status) => {
					const statusMap = {
						'1': 'warning',
						'2': 'success',
						'3': 'danger'
					}
					return statusMap[status] || ''
				}
			}
		},

		created() {
			this.user = JSON.parse(localStorage.getItem('user'))
			this.initData()
		},

		methods: {
			initData() {
				this.pageNum = 1
				this.list = []
				this.getAllList()
			},

			// 日期选择相关
			onDateConfirm(date) {
				this.value3 = this.formatDate(date)
				this.showDatePicker = false
				this.initData()
			},

			onDateCancel() {
				this.showDatePicker = false
			},

			// 其他方法保持不变，只需将 uni API 替换为 axios
			getAllList() {
				try {
					this.isLoading = true
					const url = this.handleState == 1 ? 'listMyTodoTask' : 'listMyHandleTask'

					const res =  axios.get(`/flow/flowProcess/${url}`, {
						params: {
							pageNum: this.pageNum,
							pageSize: 10,
							status: this.approvalState,
							businessType: this.businessType,
							fromTime: this.value3,
							toTime: this.value3
						}
					})

					if (res.data.code === 200) {
						const {
							rows,
							total,
							pageNum,
							totalPage
						} = res.data
						this.list = [...this.list, ...rows]
						this.total = total
						this.hasNextPage = pageNum < totalPage
					}
				} catch (error) {
					// Toast.fail('加载失败')
				}
			},
			goTop: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},

			goDetailTap(e) {
				let url = '';
				let type = e.currentTarget.dataset.businesstype;
				let id = e.currentTarget.dataset.id;
				let taskId = e.currentTarget.dataset.taskid;
				let state = this.handleState;
				let pageUrl = [{
						businessType: 't_purchase_apply',
						path: 'canteenPurchaseDetail'
					},
					{
						businessType: 't_office_supplies_apply_record_purchase',
						path: 'purchaseControlDetail'
					},
					{
						businessType: 't_office_supplies_apply_record',
						path: 'goodsRequisitionDetail'
					},
					{
						businessType: 't_vehicle_apply',
						path: 'carApprovalDetail'
					},
					{
						businessType: 't_vehicle_excep_apply',
						path: 'carApprovalDetail'
					},
					{
						businessType: 't_vehicle_maintenance',
						path: 'carManagement/carMaintenanceDetail'
					},
					{
						businessType: 't_vehicle_attendance_leave',
						path: 'driverManagement/driverLeaveDetail'
					},
					{
						businessType: 't_notice_apply',
						path: 'annunciateDetail'
					}
				];
				url = pageUrl.find((item) => item.businessType == type).path;
				// uni.navigateTo({
				// 	url: `/pages/${url}/index?id=${id}&entrance=2&&state=${state}&&taskId=${taskId}&type=${type}`
				// });
			}
		},
	}
</script>

<style lang="scss" scoped>
	.my-approval-container {
		min-height: 100vh;
		background: #f5f5f5;
		padding-top: 10px;

		.apply-top {
			margin: 0 0 10px;
			height: 40px;
			display: flex;
			align-items: center;
			background: #fff;
		}

		.dropdown-menu {
			width: 75%;

			:deep(.van-dropdown-menu__item) {
				height: 40px !important;
				box-shadow: none !important;
			}
		}

		.apply-item {
			padding: 17px;
			margin: 10px 7.5px;
			background: #fff;
			border: 1px solid #ddd;

			.apply-title {
				font-size: 12px;
				padding: 0 0 7.5px;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #ddd;

				.type-name {
					font-weight: 600;
					font-size: 14px;
				}

				.status-tag {
					margin-left: 13.5px;
				}

				.date {
					color: #999;
				}
			}

			.apply-content {
				font-size: 12px;

				.info-row {
					margin-top: 10px;
					color: #666;

					.mr-20 {
						margin-right: 10px;
					}
				}
			}
		}
	}
	
	
	// 覆盖 Vant 样式
	 :deep(.van-dropdown-menu){
	}
	:deep(.van-dropdown-menu__bar){
		height: 30px !important;
		width: 90px !important;
		box-shadow: none !important;
	}
</style>